<template>
    <div class="list" ref="wrapper">
        <div>
                    <div class="area border-topbottom">
                        <div class="title ">当前城市</div>
                        <div class="button-div">
                            <div class="button-wrapper">
                                <div class="button">{{this.city}}</div>
                            </div>


                        </div>
                    </div>
                    <div class="area border-topbottom">
                        <div class="title ">热门城市</div>
                        <div class="button-div">
                            <div class="button-wrapper"
                                 v-for="item in hot"
                                 :key="item.id"
                                 @click="handleCity(item.name)"
                            >
                                <div class="button">{{item.name}}</div>
                            </div>


                        </div>
                    </div>
                    <div class="area border-topbottom"
                         v-for="(item,k) in cities"
                         :key="k"
                         :ref="k"
                    >
                        <div class="title">{{k}}</div>
                        <div class="item-list">
                            <div
                                class="item border-bottom"
                                v-for="i in item"
                                @click="handleCity(i.name)"
                            >
                                {{i.name}}
                            </div>
                        </div>
                    </div>

                </div>




            </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import { mapState,mapMutations } from 'vuex'
    export default {
        name: "List",
        props:['hot','cities','letter'],
        computed:{
            ...mapState(['city'])
        },

        mounted () {
            this.scroll = new BScroll(this.$refs.wrapper)
        },
        methods:{
            handleCity:function (cityName) {
                // console.log(cityName);
                // this.$store.dispatch('changeCity',cityName);
                this.changeCity(cityName);
                this.$router.push('/')
            },
            ...mapMutations(['changeCity'])
        },
        watch:{
            letter(){

                // console.log(this.$refs[this.letter][0]);
                const el = this.$refs[this.letter][0];
                this.scroll.scrollToElement(el);

            }
        }
    }
</script>

<style scoped lang="stylus">

    .border-topbottom
        &:before
            border-color:#ccc
        &:after
            border-color:#ccc
     .list
        overflow:hidden
        position: absolute
        top:1.6rem
        left:0
        right:0
        bottom:0
        .title
            line-height:.5rem
            background:#eee
            padding-left:.2rem
            color:#666
        .button-div
            overflow: hidden
            padding:.1rem
            .button-wrapper
                float: left
                width: 33.33%

                .button
                    margin: .1rem
                    padding: .1rem 0
                    text-align: center
                    border: .02rem solid #ccc
                    border-radius: .06rem

        .item-list
            .item
                line-height:.72rem
                padding-left:.2rem

</style>
